<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #cats li {
            background-color: pink;
            height: 40px;
            line-height: 40px;
            padding: 10px;
        }

        #cats li:after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            height: 0;
            height: 1px;
            /*有点粗怎么办？ 0.5px 小数不存在会向上取整*/
            background-color: green;
        }
    </style>
</head>

<body>
    <ul id="cats"></ul>
    <script>
        // 对象数组
        const cats = [
            {
                name: 'Snkers',
                age: 2
            },
            {
                name: 'Hugo',
                age: 1
            },
            {
                name: 'Sunny',
                age: 3
            }
        ];
        const oUL = document.getElementById('cats');


        for (let cat of cats) {
            document.body.innerHTML += `
            <li>
                ${cat.name} -- ${cat.age}
            </li>
        `
        }
    </script>
</body>

</html>